<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .h1{
            width: 100%;
			height: 350px;
			background-color: transparent;
			overflow:hidden;
			position:relative;
        }
        .h2{
            width: 100%;
			height: 200px;
			background-color:transparent;
			position:absolute;
			bottom:0;
        }
        .h3{
            width: 600px;
			height: 100px;
			background-color: transparent;
			margin:auto
        }
        .h4{
            width: 100%;
			height: 550px;
			background-color: transparent;
        }
        .h5{
            width: 100%;
			height: 200px;
			background-color: transparent;
        }
        input {
			  bottom: 10px;
			  left: 200px;
			  width: 465px;
			  height: 65px;
			  border-radius: 10px;
			  background-color:white;
			  font-size:28px;
		}
		button {
			  bottom: 8px;
			  left: 550px;
			  width: 100px;
			  height: 70px;
			  border-radius: 10px;
			  font-size: 20px;
			  background:red;
			  color:white
			}
			span{
                /*强制不换行*/
                white-space: nowrap;
                position:absolute;
            }
            .right {
			  position: absolute;
			  visibility: hidden;
			  white-space: nowrap;
			  /*left: 700px;*/
			  transform: translateX(700px);
			}
			.left {
			  position: absolute;
			  white-space: nowrap;
			  user-select: none;
			  transition: transform 7s linear; /* 时间相同 越长的弹幕滑动距离越长 所以越快~ */
			}
    </style>
</head>
<body background="picture4.jpg" style="background-size:100%;background-color:black" >
    <div class="h5">
        <div style="width:200px;height:200px;background-color:transparent">
            <img src="picture/1.jpg" style="font-color:white;width:180px;margin-top:10px;margin-left:10px;float:left">
        </div>
<!--        <img src="picture/7.png" style="font-color:white;width:200px;margin-top:30px;margin-left:30px;float:right">-->
    </div>
    <div id="mainScreen" class="h1"></div>
    <div class="h4" style="background-color:white">
<!--        <video id="v1" width=100% height="550" controls autoplay>-->
<!--            <source src="picture/5.mp4" type="video/mp4">-->
<!--            <source src="picture/5.mp4" type="video/mp4">-->
<!--            <source id="v2" src="picture/5.mp4" type="video/mp4">-->
<!--            <source id="v3" src="picture/5.mp4" type="video/ogg">-->
<!--            <source id="v4" src="picture/5.mp4" type="video/webm">-->
<!--            <object data="movie.mp4" width="320" height="240">-->
<!--                <embed id="v5" src="picture/5.mp4" width="320" height="240">-->
<!--            </object>-->
<!--        </video>-->
    </div>
    <div class="h2">
        <div class="h3">
            <div style="width: 480px;height: 100px;background-color: transparent;float:left;">
<!--                <input id="txt" type="text">-->
                <select id="txt" value="1" style="bottom: 10px;left: 200px;width: 465px;height: 65px;border-radius: 10px;background-color:white;font-size:28px;overflow-y:hidden">
                    <option style="font-size:14px" value="祖国是人民最坚实的依靠，英雄是民族最闪亮的坐标">英雄是民族最闪亮的坐标</option>
                    <option style="font-size:14px" value="理想之光不灭，信念之光不灭">理想之光不灭，信念之光不灭</option>
                    <option style="font-size:14px" value="天地英雄气，千秋尚凛然">天地英雄气，千秋尚凛然</option>
                    <option style="font-size:14px" value="英雄，是民族的脊梁，是家国的精魂">英雄，是民族的脊梁，是家国的精魂</option>
                    <option style="font-size:14px" value="伟大出自平凡，英雄来自人民。">伟大出自平凡，英雄来自人民。</option>
                    <option style="font-size:14px" value="激扬英雄精神，砥砺家国情怀">激扬英雄精神，砥砺家国情怀</option>
                    <option style="font-size:14px" value="缅怀英烈魂，铭记来时路">缅怀英烈魂，铭记来时路</option>
                    <option style="font-size:14px" value="不惜为我身先死，后继频频为九泉">不惜为我身先死，后继频频为九泉</option>
                </select>
            </div>
            <div style="width: 100px;height: 100px;background-color: transparent;float:right">
                <button id="btn">留  言</button>
            </div>
        </div>
    </div>
    <script>
            window.onload = function(){
                //document.getElementById("v1").src="../picture/6.mp4";
                //document.getElementById("v1").load();
                //var video1 = document.getElementById("v")
                //alert(video1)
                var oBtn = document.getElementById("btn");
                var oText = document.getElementById("txt");
                var oScreen = document.getElementById("mainScreen");
                oBtn.onclick = sendMessage;
                // 每次点击清空输入框
                //oText.onclick = function(){
                    //oText.value = "";
                //};
                //添加回车提交事件
                document.onkeydown = function(evt){
                    var event = evt || window.event;//兼容IE
                    if(event.keyCode == 13){
                        sendMessage();
                    }
                };
                function sendMessage(){
                    //如果输入为空则弹出对话框
                    if(oText.value.trim() == ""){
                        alert("请正确输入");
                    }
                    else{
                    //如果有输入则动态创建span并将内容添加到span中，然后再将span添加到mainScreen中
                        var oDan1 = document.createElement("span");
                        oDan1.innerText = oText.value;
                        // 定义随机字体大小
                        var oFontSize  = parseInt(Math.random()*16+28);
                        // 创建随机颜色
                        var oFontColor =  '#'+Math.floor(Math.random()*16777215).toString(16);
                        // 随机高度
                        var oMax = oScreen.offsetHeight - oFontSize;
<!--                        var oMin = oScreen.offsetTop;-->
                        var oMin = 0;
                        var oHeight = Math.floor(Math.random() * (oMax-oMin) + oMin);
                        oDan1.style.color = oFontColor;
                        oDan1.style.fontSize = oFontSize + "px";
                        oDan1.style.marginTop = oHeight + "px";
                        //alert(oHeight);
                        // Move
                        var variable = 800; //800是mainScreen的宽度，也可写成：oDan1.offsetLeft
                        //alert(variable)
                         var timer = setInterval(function () {
                            oDan1.style.marginLeft = variable + "px";
                        //如果没有超出边界就将span动态添加到oScreen
                            if (variable > -oDan1.offsetWidth){
                                variable-=2;
                                oScreen.appendChild(oDan1);
                            }
                            else {
                                clearInterval(timer);
                                // 当显示超出范围就删除节点，这里我之前用display:none不管用
                                oDan1.parentNode.removeChild(oDan1);
                            }
                        }, 1);
                    }
                }
            }
    </script>
</body>
</html>